<!DOCTYPE HTML>
<html>
<head>
<include file="Public/head"/>
</head>
<body>
	<!-- 头部 -->
	<include file="Public/header"/>
	<!-- /头部 -->
	
	<!-- 主体 -->
	 <div class="contact text-center">
            
            <div class="container">
                 <h3 class="detail-font text-left" data-to="22.345775" data-po="113.4145466">聯繫我們</h3>
                 <div class="col-md-6">
                  <div class="gmap3" id="map-canvas"></div>
                 </div>
                <div class="swiper-container swiper1 col-md-6">
                    <div class="swiper-wrapper">
                        <foreach name="data" item="val">
                        <div class="swiper-slide">
                             <div class="contact-border">
                                <i class="fa fa-home contact-ico"></i>
                                <p>{$val['title']}</p>
                            </div>
                            <div class="contact-border">
                                <i class="fa fa-map-marker contact-ico map-ico" data-map="{$val['mapsite']}"></i>
                                <p>{$val['shop_add']}</p>
                            </div>
                            <div class="contact-border">
                                <i class="fa fa-phone contact-ico"></i>
                                <p>{$val['shop_tel']}</p>
                            </div>
                            <div class=" contact-border">
                                <i class="fa fa-envelope-o contact-ico"></i>
                                <p>{$val['shop_email']}</p>
                            </div>

                            <div class="contact-border">
                                <i class="fa fa-fax contact-ico"></i>
                                <p>{$val['shop_fax']}</p>
                            </div>
                        </div>  
                        </foreach>
         
              </div>
               
                   <div class="swiper-button-next swiper-button-next1"><i class="fa fa-angle-right slide-ico"></i></div>
                   <div class="swiper-button-prev swiper-button-prev1"><i class="fa fa-angle-left slide-ico"></i></div>
            </div>
        </div>
        </div>    
<!--聯繫我們-->
	<include file="Public/message"/>
<!--/聯繫我們-->
        <div class="col-md-12 copyright text-center">{:C('WEB_COPYRIGHT')}</div>
        <a class="go-top" href="#top"><i class="fa fa-angle-up"></i></a>
            {:C('GOOGLEANALYTICS')}
        <script src="__PUBLIC__/Index/js/jquery.min.js" type="text/javascript"></script>
        <script src="__PUBLIC__/Index/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>
        <script src="__PUBLIC__/Index/dist/js/swiper.js" type="text/javascript"></script>
     
         <script src="__PUBLIC__/Index/js/sjc.js" type="text/javascript"></script> 
        <script type="text/javascript">
              $('.col-nav li').removeClass('active');
           $('.col-nav li:eq(4)').addClass('active');
           $('.nav-btn span').text('聯繫我們');
var map = $('.swiper-slide-active').find('.fa-map-marker').attr('data-map').split(',');
var a1 = map[0];
var a2 = map[1];
$('.swiper-button-next,.swiper-button-prev').click(function(){

map = $('.swiper-slide-active').find('.fa-map-marker').attr('data-map').split(',');
a1 = map[0];
a2 = map[1];
initialize();
})
function initialize() {
  var mapOptions = {
    zoom:14,
    center: new google.maps.LatLng(a1,a2),
     streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
     mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_RIGHT,
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    },
     zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    }
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
 marker2 = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(a1,a2)
  });
 var bounds = new google.maps.LatLngBounds(marker2.getPosition());
}
google.maps.event.addDomListener(window, 'load', initialize);
$('.map-ico').click(function(){
  
  var a1=$(this).attr('data-to');
  var a2=$(this).attr('data-po');
  var mapOptions = {
    zoom:14,
    center: new google.maps.LatLng(a1,a2),
     streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
     mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_RIGHT,
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    },
     zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    }
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
 marker2 = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(a1,a2)
  });
 var bounds = new google.maps.LatLngBounds(marker2.getPosition());
});
</script>
	<!-- /主体 -->
</body>
</html>